<!--  -->
<template>
  <div class="fixed-qrcode">
    <div v-if="itemList && itemList.length > 0">
      <div class="item" v-for="(item, index) in itemList" :key="index">
        <div style="display: flex;justify-content: center;">
          <el-image style="max-width:150px;" :src="item.value">
          </el-image>
        </div>
        <div class="item-opt">
          <el-button @click="delData(index)" type="text">删除</el-button>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin: 12px;" v-else>
      <span style="color: #868686;">没有二维码图片！</span>
    </div>
    <div class="bt">
      <el-button v-if="itemList.length <= 3" size="mini" type="success" @click="changeImageRepertory">选择图片</el-button>
    </div>
    <ChooseRepertory ref="fixedChooseImages" />
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
export default {
  props: {
    itemList: {
      type: Array
    },
    addQRCode: {
      type: Function
    },
    delQRCode: {
      type: Function
    }
  },
  data () {
    return {
    }
  },
  methods: {
    delData (index) {
      this.delQRCode(index)
    },
    changeImageRepertory () {
      this.$refs['fixedChooseImages'].show({ title: '选择二维码图片', max: 1, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList && repertoryList.length > 0) {
          let repertory = repertoryList[0]
          if (repertory) {
            this.addQRCode(repertory)
          }
        }
      })
    }
  },
  components: {
    ChooseRepertory
  }
}

</script>

<style scoped lang="scss">
.fixed-qrcode {
  padding-left: 24px;
  font-size: 12px;

  .item {
    margin-bottom: 24px;

    .item-opt {
      text-align: center;
    }
  }

  .bt {
    text-align: center;
  }
}
</style>
